<template>
  <div class="component-root-container">
    <el-header>
      <el-form
        ref="formRule"
        :rules="formRule"
        :model="queryParams"
        label-position="right"
        label-width="190px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="组织机构总部:" prop="hqCode">
              <el-input
                v-model="queryParams['hqCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="组织机构省份:" prop="provOrgCode">
              <el-input
                v-model="queryParams['provOrgCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="组织机构地市:" prop="cityOrgCode">
              <el-input
                v-model="queryParams['cityOrgCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="管理区域所在省份编码:"
              prop="consUnitProvinceCode"
            >
              <el-input
                v-model="queryParams['consUnitProvinceCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理区域所在地市编码:" prop="consUnitOrgCode">
              <el-input
                v-model="queryParams['consUnitOrgCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="管理区域所在区域(区县)编码:"
              prop="countryCode"
            >
              <el-input
                v-model="queryParams['countryCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="利润中心(损益单元编号):" prop="localOrgCode">
              <el-input
                v-model="queryParams['localOrgCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料编码:" prop="nmaterialCode">
              <el-input
                v-model="queryParams['nmaterialCode']"
                placeholder="请输入"
                @input="change($event)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料分类主设备标识:" prop="managementName">
              <el-select
                v-model="queryParams['managementName']"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :offset="16" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div>
              <span>调用次数/日：</span><span>{{ query.count }}</span>
            </div>
            <div>
              <span>拦截比率：</span><span>{{ query.rate }}</span>
            </div>
            <div>
              <a
                class="link"
                href="javascript:;"
                @click="$router.push({ name: 'biz-ml' })"
                >详情</a
              >
            </div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              在项目设计时实时计算出省、地市、区域物资最高单价/最低单价/可用库存余额，服务最高单价/最低单价/基准价/安全生产费并由PMS调用自动带入信息，为用户提供价格预警提示，减少用户操作。
            </div>
          </div>
          <div class="page-tip">
            <div class="params-tip">
              <span @click.ctrl.alt="clickExample">示例参数</span>：组织机构总部:100001, 组织机构省份: 130000, 组织机构地市: 131000, 管理区域所在省份编码: 130000, 管理区域所在地市编码: 131000, 管理区域所在区域(区县)编码: 131002, 利润中心(损益单元编号): 131000, 物料编码: 0123030105020601010001, 物料分类主设备标识: 服务
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <el-row v-for="(item, index) in dialogData" :key="index">
                <el-col> 单价(三年内最高): {{ item.maxNakedPrice }} </el-col>
                <el-col> 单价(三年内最低): {{ item.minNakedPrice }} </el-col>
                <el-col> 基准价: {{ item.standardPrice }} </el-col>
                <el-col> 安全生产费: {{ item.safetyFee }} </el-col>
                <el-col>可用库存数量: {{ item.availableQuantity }}</el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import mixin from './mixins.js'
export default {
  name: "priceForwardWarning", //项目立项设计环节价格预警提示
  mixins: [mixin],
  data() {
    return {
      query: {
        count: 0,
        rate: "--"
      },
      dialogData: [],
      queryParams: {
        hqCode: "",
        provOrgCode: "",
        cityOrgCode: "",
        consUnitProvinceCode: "",
        consUnitOrgCode: "",
        countryCode: "",
        localOrgCode: "",
        nmaterialCode: "",
        managementName: ""
      },
      options: [
        {
          label: "主设备",
          value: "1"
        },
        {
          label: "辅材",
          value: "2"
        },
        {
          label: "服务",
          value: "3"
        }
      ],
      formRule: {
        hqCode: [
          {
            required: true,
            message: "请输入组织机构总部",
            trigger: "blur"
          }
        ],
        provOrgCode: [
          {
            required: true,
            message: "请输入组织机构省份",
            trigger: "blur"
          }
        ],
        cityOrgCode: [
          {
            required: true,
            message: "请输入组织机构地市",
            trigger: "blur"
          }
        ],
        consUnitProvinceCode: [
          {
            required: true,
            message: "请输入管理区域所在省份编码",
            trigger: "blur"
          }
        ],
        consUnitOrgCode: [
          {
            required: true,
            message: "请输入管理区域所在区域地市编码",
            trigger: "blur"
          }
        ],
        countryCode: [
          {
            required: true,
            message: "请输入管理区域所在区域(区县)编码",
            trigger: "blur"
          }
        ],
        localOrgCode: [
          {
            required: true,
            message: "请输入利润中心(损益单元编号)",
            trigger: "blur"
          }
        ],
        nmaterialCode: [
          {
            required: true,
            message: "请输入物料编码",
            trigger: "blur"
          }
        ],
        managementName: [
          {
            required: true,
            message: "请选择物料分类主设备标识",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.queryPageCount("4.6");
  },
  watch: {
    'queryParams.managementName'(newVal){
      if (/[\u4E00-\u9FFF]+/.test(newVal)) {
        let option = this.options.find(option => option.label === newVal)
        this.queryParams.managementName = option.value
      }
    }
  },
  mounted() {},
  methods: {
    async buttonClick() {
      try {
        await this.$refs["formRule"].validate();
        this.dialogData = [];
        var params = [
          {
            hqCode: this.queryParams.hqCode,
            provOrgCode: this.queryParams.provOrgCode,
            cityOrgCode: this.queryParams.cityOrgCode,
            consUnitProvinceCode: this.queryParams.consUnitProvinceCode,
            consUnitOrgCode: this.queryParams.consUnitOrgCode,
            countryCode: this.queryParams.countryCode,
            localOrgCode: this.queryParams.localOrgCode,
            nmaterialCode: this.queryParams.nmaterialCode,
            managementName: this.queryParams.managementName
          }
        ];
        //console.log(params)
        const r = await this.$http({
          url: this.$http.adornBizUrl("/pmsSysProj/optimization"),
          method: "post",
          // data: this.$http.adornData("param=" + JSON.stringify(...params), false),
          data: params,
          // headers: {
          //   "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          // }
        });
        if (r.data.data.length > 0) {
          //console.log(r)
          let dialogDataTemp = r.data.data;
          // this.dialogData = dialogDataTemp.map(obj => Object.keys(obj).forEach(key => obj[key] = obj[key] || '--') || obj)
          this.dialogData = dialogDataTemp
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    },
    reset() {
      this.queryParams = {
        hqCode: "",
        provOrgCode: "",
        cityOrgCode: "",
        consUnitProvinceCode: "",
        consUnitOrgCode: "",
        countryCode: "",
        localOrgCode: "",
        nmaterialCode: "",
        managementName: ""
      };
      this.dialogData = [];
      this.$refs["formRule"].clearValidate();
    },
    change(e) {
      this.$forceUpdate();
    },
    async queryPageCount(scene) {
      try {
        const r = await this.$http({
          url: this.$http.adornBizUrl("/log/queryStatistics"),
          method: "post",
          data: this.$http.adornData(
            "param=" + JSON.stringify({ scene: scene }),
            false
          ),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        });
        if (r.data.data && r.data.data.length > 0) {
          var result = r.data.data[0];
          this.query.count = result.cnt || "0";
          this.query.rate =
            result.per == null ? "--" : (result.per * 100).toFixed(1) + "%";
        }
      } catch (e) {
        console.log(e);
      } finally {
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/scss/_formatQueryPage";
@include formatQueryPage(190px, 60%, right);
.el-input {
  width: 60%;
}

.el-select {
  width: 60%;
}

.query {
  color: rgba(255, 255, 255, 1);
  background: rgba(235, 75, 75, 1);
  border-radius: 6px;
  border-color: rgba(235, 75, 75, 1);
}
</style>
